const path = require('path');
// 引入html打包插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入提取css文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//引入 优先css的插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {

    // 入口
    entry: {
        index:"./src/pages/index/index.js",
        jingxuan:"./src/pages/jingxuan/jingxuan.js",
        miaosha:"./src/pages/miaosha/miaosha.js",
        youxuan:"./src/pages/youxuan/youxuan.js",
        car:"./src/pages/car/car.js",
        zhineng:"./src/pages/zhineng/zhineng.js",
    },
    // 出口
    output: {
        // 公共的文件输出路径
        publicPath: "./",
        filename: "js/[name].js",
    },
    // 加载器
    module: {
        // 加载器的规则
        rules: [
            // css加载器
            {
                test: /\.css$/, use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: "../"
                    }
                }, "css-loader"]
            },
            // less加载器
            {
                test: /\.less$/, use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: "../"
                    }
                }, "css-loader", "less-loader"]
            },
            // css中引用图片的加载器
            {
                test: /\.(jpg|jpeg|webp|gif|svg|png)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 10 * 1024,
                        name: "[hash:16].[ext]",
                        outputPath: "imgs",
                        esModule: false, //禁用es6的模块化
                    }
                }]
            },
            // html页面中的图片加载器
            { test: /\.html$/, use: ["html-loader"] },
            // 加载iconfont字体图标
            {
                test: /\.(ttf|woff|woff2|eot|svg)$/i, use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[hash:16].[ext]', //设置字体图标文件的文件名
                        outputPath: 'fonts', //设置字体图标文件的打包文件夹
                    }
                }]
            }

        ]
    },

    // 插件
    plugins: [
        // 登录页
        new HtmlWebpackPlugin({
            template: './src/pages/index/index.html',
            filename: "index.html",
            chunks: ["index"]
        }),
        // 精选
        new HtmlWebpackPlugin({
            template: './src/pages/jingxuan/jingxuan.html',
            filename: "jingxuan.html",
            chunks: ["jingxuan"]
        }),
        // 秒杀
        new HtmlWebpackPlugin({
            template: './src/pages/miaosha/miaosha.html',
            filename: "miaosha.html",
            chunks: ["miaosha"]
        }),
        // 优选
        new HtmlWebpackPlugin({
            template: './src/pages/youxuan/youxuan.html',
            filename: "youxuan.html",
            chunks: ["youxuan"]
        }),
        // 购物车
        new HtmlWebpackPlugin({
            template: './src/pages/car/car.html',
            filename: "car.html",
            chunks: ["car"]
        }),
        // 智慧家居
        new HtmlWebpackPlugin({
            template: './src/pages/zhineng/zhineng.html',
            filename: "zhineng.html",
            chunks: ["zhineng"]
        }),
        //提取css文件的插件
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        }),
        // 优化css的插件
        new OptimizeCssAssetsWebpackPlugin(),
        // 清理dist目录下的文件
        new CleanWebpackPlugin()
    ],
    // 模式
    mode: process.env.NODE_ENV,

    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 8080,
        open: true,
        publicPath: '/',
        openPage: 'index.html',
    },
    target: 'web',
}